<template>
  <div>
    <h1>侦听器,侦听数据的变化</h1>
    <input type="text" v-model="uname" />
    <span>{{ msg }}</span>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    // data放数据  mathod放方法  cpmputed放计算属性  watch放侦听器
    return {
      uname: "",
      msg: "",
    };
  },
  //侦听器 和data平级
  //侦听器两种写法:
  watch: {
    //1.-------------------函数写法--------------------------

    // 数据项uname(新值,原值){}
    // uname(newval,oldval){
    //   console.log(newval,oldval);
    // }

    //2.-------------------对象写法--------------------------------

    // 数据项:{
    //   handler(新值,原值){},//相当于函数写法  固定的写法
    //   immediate:true,//可选
    //   deep:true//可选
    //    }

    // 1. 安装axios  npm i axios
    // 2. 导入 import axios from 'axios'
    // 3. 侦听器函数中，调用axios发送请求
    // uname: {
    //   handler(newval, oldval) {
    //     console.log(newval, oldval);
    //   },
    // },

    uname: {
      async handler(newval) {
        const { data: res } = await axios.get(
          "http://www.itcbc.com:3006/api/finduser/" + newval
        );
        this.msg = res.message;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>